<template>
  <el-button
    round
    class="login-submit"
    :loading="loading"
    type="primary"
    @click="handleLogin"
  >
    <slot></slot>
  </el-button>
</template>
<script>
export default {
  name: 'tencentCaptcha',
  props: ['loading', 'formRef'],
  data () {
    return {
      captcha: null
    }
  },
  mounted () {
    this.getCaptchaInfo()
  },
  methods: {
    // 获取后台防水墙配置
    getCaptchaInfo () {
      this.$POST('sot-admin-api/sys/auth/queryLoginConfig', {}).then(res => {
        if (res.errorCode == '00000' && res.data?.verifyEnable) {
          // 初始化防水墙
          this.captcha = new TencentCaptcha(
            res.data.verifyAppId,
            res => {
              if (res.ret === 0) {
                this.$emit('adopt', res)
              }
            },
            {}
          )
        }
      })
    },
    handleLogin () {
      if (this.formRef && this.captcha) {
        this.formRef.validate(valid => {
          if (valid) {
            this.captcha.show()
          }
        })
      } else {
        // 没有防水墙信息，直接登录
        this.$emit('adopt', {})
      }
    }
  }
}
</script>
